<template>
    <div class="footer flex justify-center bg-gray-50" style="z-index:10000;">
        <div class="container bg-white p-2">
            <el-row style="height: 100%;">
                <el-col :span="4" class="flex items-center">
                    <SmallPlay />
                </el-col>
                <el-col :span="16" class="flex items-center">
                    <div id="wavesurfer" style="width:100%;"></div>
                </el-col>
                <el-col :span="4" class="flex items-center justify-end">
                    <el-space :size="16">
                        <el-icon :size="size" class="pointer text-blue-700">
                            <ShoppingCart />
                        </el-icon>
                        <span class="iconfont pointer">&#xe79c;</span>
                        <span class="iconfont pointer">&#xe8a0;</span>
                        <span class="iconfont pointer">&#xe66d;</span>
                        <span class="iconfont pointer text-blue-700">&#xe60d;</span>
                        <MusicListButton />
                    </el-space>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
import SmallPlay from './SmallPlay.vue'
import { ShoppingCart, Memo } from '@element-plus/icons-vue'
import MusicListButton from "./MusicListButton.vue";
const size=18;
</script>
<style scoped>
.footer {
    width: 100%;
    position: fixed;
    bottom: 0px;
}

.container {
    width: 1440px;
    user-select: none;
    height: 90px;
}
.pointer{
    cursor: pointer;
}
</style>